<!-- 考勤-基础设置-假期设置-提醒设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        showBack
      ></pageHeaderNew>
    </template>
    <a-collapse
      :default-active-key="['1']"
      :bordered="false"
      style="margin-top: 10px"
    >
      <a-collapse-item header="使用指南" key="1">
        <template #header>
          <span style="font-size: 24px">使用指南</span>
        </template>
        <template #extra>
          <a-button type="primary" @click.stop="save">保存</a-button>
        </template>
        <a-list :bordered="false" :split="false" size="small">
          <a-list-item v-for="(item, index) in listArr" :key="index">
            {{ item }}
          </a-list-item>
        </a-list>
      </a-collapse-item>
    </a-collapse>
    <!-- <ConditionBox :margin-bottom="20">
      <template #left>
        <a-input-search
          :style="{ width: '220px' }"
          placeholder="请输入提醒事件"
          search-button
          @search="onSearch"
          @press-enter="onSearch"
          v-model="nameSearch"
        />
      </template>
      <template #right>
        <a-button type="primary" @click="add(null)" style="margin-right: 10px"
          >新增班次</a-button
        >
      </template>
    </ConditionBox> -->
    <table-turn
      :table-data="getTableData"
      :args="{ pagination: false }"
      ref="tableRef"
    >
      <!-- <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column> -->
      <a-table-column
        align="center"
        :width="200"
        data-index="name"
        title="提醒事件"
      >
      </a-table-column>
      <a-table-column data-index="illustrate" title="提醒说明">
      </a-table-column>
      <a-table-column align="center" :width="200" title="是否提醒">
        <template #cell="{ record }">
          <a-switch
            checked-value="1"
            unchecked-value="2"
            v-model:model-value="record.isCheck"
          />
        </template>
      </a-table-column>
      <a-table-column align="center" :width="500" title="提前多久提醒">
        <template #cell="{ record }">
          <template v-if="record.appletDisplay">
            {{ record.appletDisplay }}
          </template>
          <template v-else>
            <a-row class="grid-demo" :gutter="{ md: 4, lg: 20, xl: 16 }">
              <a-col :span="5">
                <div
                  @click="check('7', record)"
                  class="item"
                  :class="{ 'is-check': record.day === '7' }"
                >
                  7天
                </div>
              </a-col>
              <a-col :span="5">
                <div
                  @click="check('15', record)"
                  class="item"
                  :class="{ 'is-check': record.day === '15' }"
                >
                  15天
                </div>
              </a-col>
              <a-col :span="5">
                <div
                  @click="check('30', record)"
                  class="item"
                  :class="{ 'is-check': record.day === '30' }"
                >
                  30天
                </div>
              </a-col>
              <a-col :span="6">
                <a-select placeholder="自定义" v-model="record.day">
                  <a-option
                    v-for="item in 30"
                    :key="item"
                    :value="String(item)"
                    :disabled="
                      '7' === String(item) ||
                      '15' === String(item) ||
                      '30' === String(item)
                    "
                  >
                    {{ item }}天
                  </a-option>
                </a-select>
              </a-col>
            </a-row>
          </template>
        </template>
      </a-table-column>
    </table-turn>
  </ContentCard>
</template>

<script lang="ts" setup>
import {
  GetReminderSetting,
  PutReminderSetting
} from '@/apis/attendance/base-setting/index';
const title = '提醒设置';
const breadCrumb: string[] = ['考勤', '基础设置', '假期设置', '提醒设置'];

const listArr = [
  `1、员工可在考勤打卡小程序查看假期余额。`,
  `2、若当天修改了提醒设置，因时间差，将在次日及以后根据您的设置进行提醒。`,
  `3、若余额有变动，将在上午10点陆续发送通知；若假期发放或扣减，将在下午3点陆续发送提醒`
];

let modalVisible = ref(false); // 判断新增弹出框是否打开
let currData = ref(); // 储存当前选中数据
let tableRef = ref();
let tableData = reactive([
  {
    name: '假期发放',
    illustrate: '根据假期发放规则，系统自动发放假期前给予提醒。',
    isCheck: '',
    day: ''
  },
  {
    name: '假期扣减',
    illustrate: '根据假期扣减规则，系统自动扣减假期余额前给予提醒。',
    leaveDeductionWarn: '',
    day: ''
  },
  {
    name: '余额变动',
    illustrate: '当假期余额更新，即发送提醒。包括发放、修改、扣减余额。',
    balanceChangeWarn: '',
    appletDisplay: '假期余额更新后，即发送提醒通知'
  }
]);

let nameSearch = ref(''); // 搜索框值

// 新增
const add = (record: any) => {
  modalVisible.value = true;
};

// 获取表格数据
const getTableData = async () => {
  try {
    const {
      appletDisplay,
      balanceChangeWarn,
      leaveDeductionWarn,
      leaveDeductionWarnDay,
      leavePaymentWarn,
      leavePaymentWarnDay
    } = await GetReminderSetting();
    tableData[0].day = leavePaymentWarnDay;
    tableData[0].isCheck = leavePaymentWarn;
    tableData[1].day = leaveDeductionWarnDay;
    tableData[1].isCheck = leaveDeductionWarn;
    tableData[2].balanceChangeWarn = balanceChangeWarn;
    tableData[2].isCheck = appletDisplay;
    return Promise.resolve(tableData);
  } catch (error: unknown) {
    console.log(error);
  }
};

// 搜索框搜索事件
const onSearch = () => {
  refresh();
};

const check = (str: string, record: any) => {
  console.log(str, record);
  record.day = str;
};

const save = () => {
  const data: any = {};
  data.leavePaymentWarnDay = tableData[0].day;
  data.leavePaymentWarn = tableData[0].isCheck;
  data.leaveDeductionWarnDay = tableData[1].day;
  data.leaveDeductionWarn = tableData[1].isCheck;
  data.balanceChangeWarn = tableData[2].balanceChangeWarn;
  data.appletDisplay = tableData[2].isCheck;
  PutReminderSetting({ list: data });
};

// 编辑
const goEdit = (record: any) => {
  currData.value = record;
  modalVisible.value = true;
};

// 删除某一行
const del = async (id: number) => {
  try {
    // await DelHumanChangeSetting({ id });
    refresh();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 弹窗自定义事件
const indexEmit = async (record: any) => {
  //
};

// 刷新表格数据
const refresh = () => {
  tableRef.value.loadData();
};
</script>

<style lang="less" scoped>
:deep(.arco-collapse-item-content) {
  background-color: #fff;
}
.grid-demo {
  justify-content: space-between;
  align-items: center;
  .item {
    height: 30px;
    border: 1px solid #f2f2f2;
    line-height: 30px;
    font-size: 13px;
    border-radius: 5px;
    cursor: pointer;
  }
  .is-check {
    border-color: #8cc5ff;
    color: #8cc5ff;
  }
}
</style>
